<template lang='pug'>
.main-list
  label.label-tips(v-if="readOnly && isEditing")
    h6.font-weight-bold 此版本不允许编辑设备
    p 仅【当前使用】的版本能编辑设备
  .main-item(v-for="(item, index) in lists")
    .top-wrap
      .important-info
        strong 设备名称：{{item.deviceName|filterDeviceName(relations.deviceNames)}}
        span {{item.siteCode}}
      div 站点名称：{{item.siteName || '-'}}
      small 地址：{{item.installAddress}}
    .bottom-wrap.d-flex
      .left-wrap
        span 流向：
        //- 源
        el-select.select-wrap(v-model="item.fromAreaId"
          placeholder="来源" size="mini"
          :disabled="readOnly || !item.enabledBoundary"
          @change="editDevice(item)")
          el-option(
            v-for="area in relations.pressureAreas"
            v-if="area.value !== item.toAreaId"
            :key="area.value"
            :value="area.value"
            :label="area.label") {{area.label}}
        //- 流向
        a.link(
          v-model="item.isLeftToRight"
          :class="item.isLeftToRight?'ToRight':'ToLeft'"
          @click="changeDirection(item)")
        //- 目的
        el-select.select-wrap(v-model="item.toAreaId"
          placeholder="目的" size="mini"
          :disabled="readOnly || !item.enabledBoundary"
          @change="editDevice(item)")
          el-option(
            v-for="area in relations.pressureAreas"
            v-if="area.value !== item.fromAreaId"
            :key="area.value"
            :value="area.value"
            :label="area.label") {{area.label}}
      .right-wrap
        el-switch(
          v-model="item.enabledBoundary"
          active-color="#29a1f7"
          inactive-color="#dfdfdf"
          :active-value="true"
          :inactive-value="false"
          :disabled="readOnly"
          @change="editDevice(item)")
</template>

<script>
/**
 * @description 边界设备
 * @author linmn
 */
// import ToLeft from '../../../assets/img/ToLeft.png'
// import ToRight from '../../../assets/img/ToRight.png'
export default {
  name: 'Boundary',
  props: {
    datas: {
      type: Array,
      default: () => ([])
    },
    readOnly: {
      type: Boolean,
      default: true
    }, // 是否只读
    isEditing: {
      type: Boolean,
      default: true
    }, // 是否编辑
    version: Number // 版本id
  },
  filters: {
    filterDeviceName (name, relation) {
      if (!relation || !relation.length) return name
      const _find = relation.find(item => item.value === name)
      return _find ? _find.label : name
    },
    filterRelation (clipId, options) {
      if (!clipId) return options
      return options.filter(opt => opt.value !== clipId)
    }
  },
  watch: {
    datas (val) {
      this.lists = val.map(res => {
        console.log('list-1--:', res)
        return {
          ...res.device,
          ...res,
          isLeftToRight: true
        }
      })
    }
  },
  data () {
    return {
      // ToLeft,
      // ToRight,
      lists: this.datas.map(res => {
        console.log('list-2--:', res)
        return {
          ...res.device,
          ...res,
          isLeftToRight: true
        }
      }),
      values: {},
      /* 选项 */
      relations: {}
      // isLeftToRight: true // 表明指向，left:源 -> right:目的
    }
  },
  mounted () {
    this.$getRelation({
      relations: 'pressureAreas, yesOrNo, deviceNames'
    }).then(res => {
      if (!res) return
      this.relations = res
    })
  },
  methods: {
    // 改变流向
    changeDirection (target) {
      if (this.readOnly) return
      target.isLeftToRight = !target.isLeftToRight
      // 源数据跟目标数据交换 - 提交的时候
      let formValues = target
      if (!target.isLeftToRight) {
        const temp = target.fromAreaId
        formValues['fromAreaId'] = formValues.toAreaId
        formValues['toAreaId'] = temp
      }
      this.editDevice(formValues)
      // this.$emit('editDevice', formValues)
    },
    editDevice (target) {
      // let formValues = target
      // if (!target.isLeftToRight) {
      //   const temp = target.fromAreaId
      //   formValues['fromAreaId'] = formValues.toAreaId
      //   formValues['toAreaId'] = temp
      // }
      this.$emit('editDevice', target)
    }
  }
}
</script>

<style lang='sass' scoped>
@import '../../../assets/custom.sass'
.main-item
  margin: 12px
  border: 1px solid #e6e6e6
.top-wrap
  line-height: 20px
  border-bottom: 1px solid #dfdfdf
  padding: 5px 8px
  .important-info
    display: flex
    justify-content: space-between
.bottom-wrap
  line-height: 26px
  padding: 8px
  justify-content: space-between
  .link
    display: inline-block
    margin: 5px
    width: 15px
    height: 15px
    cursor: pointer
    vertical-align: middle
    background-size: 100%
    cursor: pointer
  .select-wrap
    width: 82px
.ToLeft
  background-image: url('../../../assets/img/ToLeft.png')
.ToRight
  background-image: url('../../../assets/img/ToRight.png')
</style>
